<!--
 * @Author: yumao 123456
 * @Date: 2023-05-31 10:09:54
 * @LastEditors: yumao 123456
 * @LastEditTime: 2023-09-13 10:58:34
 * @FilePath: \zyDataScreen\src\views\sjdp\components\ZyScreenLeft.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="rightBox">
        <!-- <div class="Rtap">
            <img src="@/assets/cockpit/Rtap.png" alt="" />
        </div> -->

        <div class="chart-box R2_box">
            <p class="chart-box-title">最新报关单</p>
            <p class="chartTbiao" style="margin-bottom: 5px">最近报关单</p>
            <div class="R1top">
                <dv-scroll-board
                    :config="configLtop"
                    class="tableW"
                    style="height: 180px"
                />
            </div>
        </div>
        <div class="chart-box R1_box">
            <p class="chart-box-title">数据分类</p>
            <div class="chartArr">
                <div style="width: 220px; height: 190px" class="dataVbox">
                    <p class="biaoTt">商品分布</p>

                    <dv-active-ring-chart
                        :config="configTop1"
                        class="dataVchat"
                    />
                    <ul class="elaphes">
                        <li
                            v-for="(item, index) in configTop1.data"
                            :key="index"
                        >
                            <div
                                class="circle"
                                :style="{ 'background-color': item.color }"
                            ></div>
                            <p>{{ item.name }}</p>
                        </li>
                    </ul>
                </div>
                <div style="width: 200px; height: 190px" class="dataVbox">
                    <p class="biaoTt">货源分析</p>
                    <dv-active-ring-chart
                        :config="configTop2"
                        class="dataVchat"
                    />
                    <ul class="elaphes" style="width: 60px">
                        <li
                            v-for="(item, index) in configTop2.data"
                            :key="index"
                        >
                            <div
                                class="circle"
                                :style="{ 'background-color': item.color }"
                            ></div>
                            <p>{{ item.name }}</p>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="chartArr">
                <div style="width: 220px; height: 190px" class="dataVbox">
                    <p class="biaoTt">外综服务类型分布</p>

                    <dv-active-ring-chart
                        :config="configBot1"
                        class="dataVchat"
                    />
                    <ul class="elaphes">
                        <li
                            v-for="(item, index) in configBot1.data"
                            :key="index"
                        >
                            <div
                                class="circle"
                                :style="{ 'background-color': item.color }"
                            ></div>
                            <p>{{ item.name }}</p>
                        </li>
                    </ul>
                </div>
                <div style="width: 200px; height: 190px" class="dataVbox">
                    <p class="biaoTt">外综类型分布</p>
                    <dv-active-ring-chart
                        :config="configBot2"
                        class="dataVchat"
                    />
                    <ul class="elaphes" style="width: 60px">
                        <li
                            v-for="(item, index) in configBot2.data"
                            :key="index"
                        >
                            <div
                                class="circle"
                                :style="{ 'background-color': item.color }"
                            ></div>
                            <p>{{ item.name }}</p>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { screenRightData } from '@/api/export.js'
export default {
    props: {},
    data() {
        return {
            configLtop: {
                header: [
                    '<span style="color:#fff;line-height:30px;height:30px" >报关单号</span>',
                    '<span style="color:#fff;line-height:30px;height:30px" >金额($)</span>',
                    '<span style="color:#fff;line-height:30px;height:30px" >公司</span>'
                ],
                data: [],
                rowNum: 5,
                headerBGC: '#2D57A1',
                headerHeight: 30,
                columnWidth: [170, 90, 181],
                align: ['center', 'right', 'center'],
                oddRowBGC: '#000C40',
                evenRowBGC: '#103375'
            },
            configTop1: {
                radius: '75%',
                activeRadius: '85%',
                data: [],
                color: [
                    '#0090FC',
                    '#60C967',
                    '#F1B927',
                    '#ee6666',
                    '#D4394D',
                    '#8C42A6',
                    '#53A88B'
                ],
                digitalFlopStyle: {
                    fontSize: 17
                }
            },
            configTop2: {
                radius: '75%',
                activeRadius: '85%',
                data: [
                    {
                        value2: 40,
                        name: '60-79岁',
                        value: 15,
                        color: '#0090FC'
                    },
                    {
                        value2: 45,
                        name: '70-89岁',
                        value: 10,
                        color: '#60C967'
                    },
                    { value2: 10, name: '高龄', value: 8, color: '#F1B927' },
                    { value2: 5, name: '百岁', value: 8, color: '#ee6666' }
                ],
                color: [
                    '#0090FC',
                    '#60C967',
                    '#F1B927',
                    '#ee6666',
                    '#D4394D',
                    '#8C42A6',
                    '#53A88B'
                ],
                digitalFlopStyle: {
                    fontSize: 17
                }
            },
            configBot1: {
                radius: '75%',
                activeRadius: '85%',
                data: [
                    { name: '杭州市', value: 44, color: '#0090FC' },
                    { name: '绍兴市', value: 15, color: '#60C967' },
                    { name: '湖州市', value: 10, color: '#F1B927' },
                    { name: '台州市', value: 8, color: '#ee6666' },
                    { name: '丽水市', value: 8, color: '#D4394D' },
                    { name: '温州市', value: 15, color: '#8C42A6' }
                ],
                color: [
                    '#0090FC',
                    '#60C967',
                    '#F1B927',
                    '#ee6666',
                    '#D4394D',
                    '#8C42A6',
                    '#53A88B'
                ],
                digitalFlopStyle: {
                    fontSize: 17
                }
            },
            configBot2: {
                radius: '75%',
                activeRadius: '85%',
                data: [
                    {
                        value2: 40,
                        name: '60-79岁',
                        value: 15,
                        color: '#0090FC'
                    },
                    {
                        value2: 45,
                        name: '70-89岁',
                        value: 10,
                        color: '#60C967'
                    },
                    { value2: 10, name: '高龄', value: 8, color: '#F1B927' },
                    { value2: 5, name: '百岁', value: 8, color: '#ee6666' }
                ],
                color: [
                    '#0090FC',
                    '#60C967',
                    '#F1B927',
                    '#ee6666',
                    '#D4394D',
                    '#8C42A6',
                    '#53A88B'
                ],
                digitalFlopStyle: {
                    fontSize: 17
                }
            }
        }
    },
    computed: {},
    created() {},
    mounted() {
        this.rightChartgetall()
    },
    watch: {},
    methods: {
        rightChartgetall(data) {
            let istype = ''
            if (!data || data == '全部') {
                istype = ''
            } else {
                istype = data
            }
            screenRightData({ type: istype }).then((res) => {
                //最近報關單
                let SalshiporderD = []
                for (let item of res.data.Salshiporder) {
                    SalshiporderD.push([
                        `<div style="width: 100%; white-space: nowrap; overflow: hidden;text-overflow: ellipsis">${item.name}</div>`,
                        `<div style="width: 100%; white-space: nowrap; overflow: hidden;text-overflow: ellipsis">${item.value1}</div>`,
                        `<div style="width: 100%; white-space: nowrap; overflow: hidden;text-overflow: ellipsis">${item.value2}</div>`
                    ])
                }
                this.configLtop.data = SalshiporderD
                this.configLtop = { ...this.configLtop }
                // 商品出口额分布
                let d1 = []
                let r1 = res.data.ExportDistribution
                for (var i in r1) {
                    r1[i].color = this.configTop1.color[i]
                    d1.push(r1[i])
                }
                this.configTop1.data = r1
                this.configTop1 = { ...this.configTop1 }
                // 商品出口额分布
                let d2 = []
                let r2 = res.data.SourcingAnalysis
                for (var i in r2) {
                    r2[i].color = this.configTop2.color[i]
                    d2.push(r2[i])
                }
                this.configTop2.data = r2
                this.configTop2 = { ...this.configTop2 }
                // 商品出口额分布
                let d3 = []
                let r3 = res.data.ExportService
                for (var i in r3) {
                    r3[i].color = this.configBot1.color[i]
                    d3.push(r3[i])
                }
                this.configBot1.data = r3
                this.configBot1 = { ...this.configBot1 }
                // 商品出口额分布
                let d4 = []
                let r4 = res.data.ExportWzf
                for (var i in r4) {
                    r4[i].color = this.configBot2.color[i]
                    d4.push(r4[i])
                }
                this.configBot2.data = r4
                this.configBot2 = { ...this.configBot2 }
            })
        },

        // 转换单位
        numberFormat(value) {
            let param = {}
            let k = 10000
            let sizes = ['', '万', '亿', '万亿']
            let i = 0
            if (value < k) {
                param.value = value
                param.unit = ''
            } else {
                i = Math.floor(Math.log(value) / Math.log(k))
                param.value = (value / Math.pow(k, i)).toFixed(2)
                param.unit = sizes[i]
            }
            return param
        }
    },
    components: {}
}
</script>

<style lang="scss" scoped>
.rightBox {
    width: 100%;
    position: relative;
    box-sizing: border-box;
    padding-right: 47px;
    cursor: pointer;
    .Rtap {
        position: absolute;
        right: 2px;
        top: 0;
        width: 32px;
        height: 660px;
        img {
            width: 100%;
            height: 100%;
        }
    }
    &:hover {
        .Rtap {
            -webkit-animation-name: scaleDraw; /*关键帧名称*/
            -webkit-animation-timing-function: ease; /*动画的速度曲线*/
            // -webkit-animation-iteration-count: infinite; /*动画播放的次数*/
            -webkit-animation-iteration-count: infinite; /*动画播放的次数*/
            -webkit-animation-duration: 1.5s; /*动画所花费的时间*/
        }
    }
    p {
        padding: 0;
        margin: 0;
    }

    .chart-box {
        width: 100%;
        background-size: cover;
        height: 100%;
        position: relative;
        &-title {
            width: 100%;
            height: 28px;
            line-height: 28px;
            font-size: 21px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #01e9ff;
            text-align: center;
            position: absolute;
            left: 0;
            top: 0;
        }
    }
    .R1top {
        .tableW {
            width: 100%;
            height: 100%;
            margin: auto;
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #f4f5f7;
        }
    }
    .chartTbiao {
        font-size: 14px;
        font-family: MicrosoftYaHei;
        background-image: -webkit-linear-gradient(
            bottom,
            #2bb3ff 0%,
            #38e7ee 100%
        );
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-weight: 600;
        font-style: italic;
    }
    .chartArr {
        width: 100%;
        height: 50%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        .dataVbox {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            box-sizing: border-box;
            padding-right: 5px;
            .biaoTt {
                width: 100%;
                font-size: 14px;
                font-family: MicrosoftYaHei;
                background-image: -webkit-linear-gradient(
                    bottom,
                    #2bb3ff 0%,
                    #38e7ee 100%
                );
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                font-weight: 600;
                font-style: italic;
                line-height: 20px;
                height: 20px;
                margin-top: 15px;
                margin-bottom: 5px;
            }
        }
    }
    .dataVchat {
        width: 120px;
        height: 120px;
        margin-right: 10px;
    }
    .elaphes {
        width: 80px;
        height: 150px;

        p {
            padding: 0;
            margin: 0;
        }
        .circle {
            width: 9px;
            height: 9px;
            border-radius: 50%;
            margin-right: 3px;
        }
        li {
            display: flex;
            align-items: center;
            height: 20px;
            font-size: 12px;
            color: #618ab8;
        }
    }
    .R1_box {
        height: 356px;
        background-image: url('../../../assets/exportScreen/R1.png');
        box-sizing: border-box;
        padding: 30px 10px 0 28px;
        margin-top: 22px;
    }
    .R2_box {
        height: 262px;
        background-image: url('../../../assets/exportScreen/R2.png');

        box-sizing: border-box;
        padding: 38px 19px 0 34px;
        .goodsUl {
            width: 100%;
            display: flex;
            justify-content: space-between;
            .goodsLi {
                width: 83px;
                height: 133px;
                text-align: center;
                position: relative;
                box-sizing: border-box;
                padding-top: 50px;
                img {
                    width: 100%;
                    height: 100%;
                    position: absolute;
                    left: 0;
                    top: 0;
                }
                .textli {
                    width: 80%;
                    margin: auto;
                    font-size: 14px;
                    color: #fff;
                }
            }
        }
    }
    .buleNum {
        color: #46b9f3;
    }
    .greenNum {
        color: #1ce480;
    }
    .redNum {
        color: #f5375b;
    }
    @keyframes scaleDraw {
        /*定义关键帧、scaleDrew是需要绑定到选择器的关键帧名称*/
        0% {
            transform: scale(1); /*开始为原始大小*/
        }
        50% {
            transform: scale(1.2); /*放大1.1倍*/
        }
    }
}
</style>